<template>
	<view class="">
		<view class="header-c ls-f-ac">
			<image :src="teacher.icon" mode="aspectFill" class="img-c"></image>
			<view class="">
				<view class="name">
					{{teacher.name||""}}
				</view>
				<view class="phone">
					{{teacher.telNo||""}}
				</view>
			</view>
			<!-- 	<image src="../../../static/images/common_pic_ytg@2x.png" v-if="status==1" mode="" class="icon"></image>
			<image src="../../../static/images/common_pic_wtg@2x.png" v-if="status==2" mode="" class="icon"></image>
			<image src="../../../static/images/common_pic_spz@2x.png" v-if="status==3" mode="" class="icon"></image> -->
		</view>
		<view class="content" v-if="type==1">
			<view class="liem ls-f-ajsb" @click="showSchool=true">
				<view class="f-32">请假课程</view>
				<view class="ls-f-ac">
					<text class="f-32-g">{{course||"请选择"}}</text>
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
			</view>
			<view class="liem ls-f-ajsb" style="padding-top: 32rpx;" @click="showSchool2=true">
				<view class="f-32">请假时间</view>
				<view class="ls-f-ac">
					<text class="f-32-g">{{time||"请选择"}}</text>
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
			</view>
			<view class="input">
				<textarea value="" style="width: 100%;" v-model="text" placeholder="请填写请假理由" />
				<text class="text-length">{{text.length}}/600字</text>
			</view>
		</view>


		<view class="content" v-else style="height: 430rpx;">
			<view class="liem ls-f-ajsb" @click="showSchool=true">
				<view class="f-32">代课课程</view>
				<view class="ls-f-ac">
					<text class="f-32-g">{{course||"请选择"}}</text>
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
			</view>
			<view class="liem ls-f-ajsb" style="padding-top: 32rpx;" @click="showSchool2=true">
				<view class="f-32">代课时间</view>
				<view class="ls-f-ac">
					<text class="f-32-g">{{time||"请选择"}}</text>
					<u-icon name="arrow-right" color="#999"></u-icon>
				</view>
			</view>
			<!--  @click="showSchool3=true" -->
			<view class="liem ls-f-ajsb" style="padding-top: 32rpx;">
				<view class="f-32">代课老师</view>
				<view class="ls-f-ac">
					<!-- <text class="f-32-g">{{dname||"请选择"}}</text>
					<u-icon name="arrow-right" color="#999"></u-icon> -->
					<u-input v-model="dname" style="font-size: 32rpx;" input-align="right" height="42" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="liem ls-f-ajsb" style="padding-top: 32rpx; border-bottom: none;" >
				<view class="f-32">联系方式</view>
				<view class="ls-f-ac">
					<!-- <text class="f-32-g">{{dTelNo||"系统自动录入"}}</text> -->
					<u-input v-model="dTelNo" style="font-size: 32rpx;" input-align="right" height="42" placeholder="请输入电话"  />
				</view>
			</view>

		</view>
		<view class="input-box" v-if="type==2">
			<view class="input">
				<textarea style="width: 100%;" maxlength="600" value="" v-model="text" placeholder="请填写代课内容" />
				<text class="text-length">{{text.length}}/600字</text>
			</view>
		</view>
		<view class="btn ls-f-ajc" @click="submit" >
			<view class="b ls-f-ajc">
				上传
			</view>
		</view>
		<u-picker v-model="showSchool2" mode="time" :params="params" @confirm="confirmTime"></u-picker>
		<u-select v-model="showSchool" :list="curriculumList" label-name="kkname" value-name="arr" @confirm="confirmSchool"></u-select>
		<u-select v-model="showSchool3" :list="userList" label-name="name" value-name="id" @confirm="confirmUserList"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:{},
				arrAdata:{
					dname:"",
					did:"",
					dTelNo:"",
					course: "",
					courseId: "",
					time: "",
					text: '',
				},
				dname:"",
				did:"",
				dTelNo:"",
				userList: [],
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				showSchool2: false,
				showSchool3: false,
				course: "",
				courseId: "",
				time: "",
				curriculumList: [],
				teacher: {},
				type: 2,
				showSchool: false,
				status: 1,
				courseList: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				text: '',
				currentIndex: 0
			}
		},
		methods: {
			confirmUserList(value){
				console.log("vvv", value)
				this.dname=value[0].label
				this.did=value[0].value
				for(var i=0;i<this.userList.length;i++){
					if(value[0].value==this.userList[i].id){
						this.dTelNo=this.userList[i].telNo
						break;
					}
				}
			},
			confirmTime(value) {
				console.log("vvv", value)
				let time = value.year + "-" + value.month + "-" + value.day + " " + value.hour + ":" + value.minute + ":" +
					value.second
				this.time = time
			},
			getTeacherClassPage() {
				this.$api.teacherClassPage({}, res => {
					console.log('>>>>>>>>>>>>>>>>', res.data)
					if (res.code == 0) {
						this.curriculumList = res.data
						for(var i=0;i<res.data.length;i++){
							this.curriculumList[i].kkname=res.data[i].productResp.name
							this.curriculumList[i].arr={categoryId:res.data[i].categoryId,categoryName:res.data[i].categoryName,scheduleId:res.data[i].id,productName:res.data[i].productResp.name,schoolId:res.data[i].schoolId,schoolName:res.data[i].schoolName}
						}
					}
					// 获取完数据收尾
					uni.stopPullDownRefresh();
				});
			},
			getUserList(){
				let data = {type:1,pageSize:100}
				this.$api.getUserList(data, res => {
					console.log(res.data);
					this.userList = res.data.list;
				
				})
			},
			init() {
				this.$api.getTeacherInfo({}, res => {
					console.log(res.data);
					this.teacher = res.data

				})
			},
			submit() {
				if (this.type == 1) {
					let data = {
						"categoryId": this.arr.categoryId,
						"categoryName": this.arr.categoryName,
						"leaveTime": this.time,
						"productName":this.arr.productName,
						"scheduleId":this.arr.scheduleId,
						"schoolId":this.arr.schoolId,
						"remake": this.text,
						"telNo": this.teacher.telNo,
						"userId": this.teacher.id,
						"userName": this.teacher.name
						
					}
					this.$api.addleave(data, res => {
						console.log(res.data);
						if (res.code == 0) {
							uni.navigateBack({
								delta: 1
							})
						}

					})
				}else{
					console.log("代课申请")
					let data = {
						"categoryId": this.arr.categoryId,
						"categoryName": this.arr.categoryName,
						"leaveTime": this.time,
						"productName":this.arr.productName,
						"scheduleId":this.arr.scheduleId,
						"schoolId":this.arr.schoolId,
						"remake": this.text,
						"telNo": this.teacher.telNo,
						"userId": this.teacher.id,
						"userName": this.teacher.name,
						"takeTelNo": this.dTelNo,
						"takeUserId": this.did,
						"takeUserName": this.dname
					}
					console.log("代课申请",data)
					this.$api.addtakeClass(data, res => {
						console.log(res.data);
						if (res.code == 0) {
							uni.navigateBack({
								delta: 1
							})
						}
					
					})
				}
				// uni.showModal({
				// 	title: '提示',
				// 	content: '确定要撤销申请吗？'
				// })
			},
			confirmSchool(value) {
				console.log("vvvvv", value)
				this.course = value[0].label
				this.arr = value[0].value
			},
			sel(e) {
				this.currentIndex = e
			},
			add() {
				uni.navigateTo({
					url: 'addWork'
				})
			},
			getschool() {
				this.$api.getschool({}, res => {
					// this.schoolList = res.data
					// console.log(this.schoolList);
					if (res.data.length != 0) {
					    res.data.forEach((ele, index) => {
					        if (ele.schoolId == '0') {
					            res.data.splice(index, 1)
					        }
					    });
					    this.schoolList = res.data
									
					}
				})
			}
		},
		onLoad(option) {
			this.type = option.type
			this.init();
			this.getTeacherClassPage();
			
			if (this.type != 1) {
				this.getUserList()
			}
		}
	}
</script>

<style scoped lang="scss" scoped>
	/deep/.u-input__input{
		font-size: 32rpx !important;
	}
	.input-box {
		position: relative;
		width: 686rpx;
		height: 380rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 32rpx;
		padding: 32rpx;
		margin: 32rpx;

		.input {
			margin-top: 32rpx;
			position: relative;

			.text-length {
				color: #999999;
				font-size: 28rpx;
				position: absolute;
				right: 0;
				bottom: 20rpx;
			}
		}
	}

	.icon {
		width: 136rpx;
		height: 136rpx;
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		padding-top: 10rpx;
		padding-bottom: 40rpx;
		background-color: #fff;
		z-index: 999;

		.b {
			color: #fff;
			font-size: 32rpx;
			width: 684rpx;
			height: 100rpx;
			background: #63B9F2;
			opacity: 1;
			border-radius: 50rpx;
		}
	}

	.content {
		width: 686rpx;
		height: 604rpx;
		background: #FFFFFF;
		margin-top: 32rpx;
		border-radius: 32rpx;
		padding: 32rpx;
		margin-left: 32rpx;

		.input {
			margin-top: 32rpx;
			position: relative;

			.text-length {
				color: #999999;
				font-size: 28rpx;
				position: absolute;
				right: 0;
				bottom: 0;
			}
		}

		.liem {
			padding-bottom: 30rpx;
			border-bottom: 1rpx solid #eee;
		}
	}

	.header-c {
		position: relative;
		padding: 48rpx 32rpx;
		width: 750rpx;
		height: 192rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 0px 0px 32rpx 32rpx;

		.img-c {
			width: 96rpx;
			height: 96rpx;
			margin-right: 30rpx;
		}
	}
</style>
